<!DOCTYPE html>
<html lang="en">
    <head>
        <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
            <meta charset="utf-8">
                <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
                    <title>
                        技术词云
                    </title>
                </link>
            </meta>
        </meta>
    </head>
    <body>
        <header class="navbar navbar-inverse navbar-static-top bs-docs-nav" id="top">
            <div class="container">
                <div class="navbar-header">
                    <button aria-controls="bs-navbar" aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-navbar" data-toggle="collapse" type="button">
                        <span class="sr-only">
                            Toggle navigation
                        </span>
                        <span class="icon-bar">
                        </span>
                        <span class="icon-bar">
                        </span>
                        <span class="icon-bar">
                        </span>
                    </button>
                    <a class="navbar-brand" href="../">
                        Logo
                    </a>
                </div>
                <nav class="collapse navbar-collapse" id="bs-navbar">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="weekline.html">
                                一周职位统计
                            </a>
                        </li>
                        <li >
                            <a href="workyear.html">
                                工作年限统计
                            </a>
                        </li>
                        <li>
                            <a href="company.html">
                                热门公司统计
                            </a>
                        </li>
                        <li>
                            <a href="education.html">
                                学历分析
                            </a>
                        </li>
                        <li class="active">
                            <a   href="word.html">
                                词云图
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>
        <!-- 主题内容 -->
        <div class="container">
            <div id="main" style="width:100%;height:600px;">
            </div>
        </div>
        <div class="container">
            <p>
                该技术词语是从招聘职位描述中提取出来的关键字。关键字一般都是英文的。中间出现中文的关键词不计算。如html5.css3不计算在内。关键词则全部处理成小写。如PHP，则处理成php。
            </p>
        </div>
        <!-- 主题结束 -->
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js">
        </script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">
        </script>
        <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.common.min.js">
        </script>
        <script src="js/echarts-wordcloud.min.js">
        </script>
    <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            //
    $(function(){
            var myChart = echarts.init(document.getElementById('main'));
            var option = {
                 title: {
                    text: '技术 词云图',
                    link: ''
                },
                tooltip : {
                        trigger: 'item',
                        formatter: "<b>{b}</b>出现{c}次"
                },
                series: [{
                    type: 'wordCloud',
                    gridSize: 12,
                    sizeRange: [22, 90],
                    rotationRange: [-90, 90],
                    shape: 'circle',
                    drawOutOfBound: false,
                    width:'100%',
                    right: 'center',
                    top: 10,
                    textPadding: 10,
                    height: 600,
                    textStyle: {
                        normal: {
                            color: function () {
                                return 'rgb(' + [
                                        Math.round(Math.random() * 255),
                                        Math.round(Math.random() * 255),
                                        Math.round(Math.random() * 255)
                                    ].join(',') + ')';
                            }
                        },
                        emphasis: {
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }},
                    data: [],
            }]
        };
        myChart.setOption(option);
        myChart.showLoading();
        $.get('http://127.0.0.1:8090/word.php')
        .done(function (data) {
            myChart.hideLoading();
            result = deal_word(data)
            option.series[0].data = result
            myChart.setOption(option);
        });

        myChart.setOption(option);
        window.onresize = myChart.resize;
    })

    function deal_word(data){
        var result  =[]
        for(key in data) {
            var tmp = {}
            tmp.name = key
            tmp.value = data[key]
            if(data[key] > 50) {
                tmp.textStyle = {
                    normal: {
                        color: 'black',
                        fontWeight:'bold',
                        fontSize:90
                    }}
            }

            result.push(tmp)
        }
        return result
    }
        </script>
    </body>
</html>
